<script setup>
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  datelist: {
    type: Array,
    default: () => {
      return [
        {
          type_class: "结算",
          title: "张小凡",
          created_at: "2017-01-12",
          type: 1,
          total: 550,
          balance: 100,
          id: 100,
        },
      ];
    },
  },
});

const emit = defineEmits(["	More", "detTo"]);
const goRecord = () => {
  emit("More");
};
const godetfun = (id) => {
  emit("detTo", id);
};
</script>

<template>
  <view class="sala-det">
    <view class="sala-det-title" v-if="title">
      <view class="sala-det-name">
        {{ title }}
      </view>
      <view class="sala-det-more" @click="goRecord">
        <text>全部</text>
        <uni-icons
          type="right"
          size="30"
          class="sala-det-more-right"
        ></uni-icons>
      </view>
    </view>
    <view class="sala-det-k">
      <view
        class="sala-det-item"
        v-for="(item, index) in datelist"
        @click="godetfun(item.id)"
      >
        <view class="sala-det-item-left">
          <view class="sala-det-item-left-name">
            {{ item.type_class }}-{{ item.title }}
          </view>

          <view
            class="sala-det-item-right-num"
            :class="item.type === 1 ? 'bageclor' : ''"
          >
            {{ item.type === 1 ? "+" : "-" }}{{ item.balance }}
          </view>
        </view>
        <view class="sala-det-item-right">
          <view class="sala-det-item-left-time">
            {{ item.create_time }}
          </view>
          <view class="sala-det-item-right-toanum"> {{ item.total }} </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sala-det {
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 0rpx auto 0rpx;
  padding-bottom: 1rpx;

  .sala-det-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 30rpx 20rpx 30rpx;

    .sala-det-name {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      line-height: 44rpx;
    }

    .sala-det-more {
      font-weight: 400;
      font-size: 24rpx;
      color: #323643;
      line-height: 40rpx;
      text-align: right;
      // margin-right: 12rpx;

      ::v-deep .sala-det-more-right {
        color: #f3498b !important;
        font-size: 24rpx !important;

        text {
          color: #f3498b !important;
          font-size: 24rpx !important;
        }
      }
    }
  }

  .sala-det-k {
    padding: 0 30rpx;

    .sala-det-item {
      // margin-top: 28rpx;
      margin-bottom: 30rpx;

      .sala-det-item-left {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sala-det-item-left-name {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
        }

        .sala-det-item-right-num {
          font-weight: bold;
          font-size: 30rpx;
          color: #060606;
          line-height: 48rpx;
          text-align: left;
          font-family: Medium !important;
        }

        .bageclor {
          color: #f3498b;
        }
      }

      .sala-det-item-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;

        .sala-det-item-left-time {
          font-weight: 400;
          font-size: 22rpx;
          color: #bbbbbb;
          line-height: 32rpx;
          text-align: left;
        }

        .sala-det-item-right-toanum {
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
          line-height: 32rpx;
          text-align: right;
          font-family: Medium !important;
        }
      }
    }
  }
}
</style>
